<template>
  <div class="page">
    <div id="login">
      <el-container style="width: 400px;
                                margin: 0 auto;
                                background: rgba(255, 255, 255, .1);
                                backdrop-filter: blur(10px);
                                border-radius: 20px;
                                box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .5)
                                ">
        <el-header class="Header">
          <h1>Login</h1>
        </el-header>
        <el-main style="width: 400px;">
          <div class="content">
            <el-form :label-position="labelPosition" label-width="80px" >
              <el-form-item >
                                    <span slot="label">
                                        <span class="form-item-lebel">账号</span>
                                    </span>
                <el-input v-model="username"></el-input>
              </el-form-item>
              <el-form-item >
                                    <span slot="label">
                                        <span class="form-item-lebel">密码</span>
                                            <span style="color: red">*</span>
                                    </span>
                <el-input clearable show-password type="password" v-model="password" @keydown.enter.native="checkLogin"></el-input>
              </el-form-item>

            </el-form>

          </div>

        </el-main>

        <div class="login-button">


          <el-button type="primary" round
                     @click="checkLogin">登录</el-button>
        </div>
        <div style=" margin: 0 auto;padding-bottom: 20px;padding-top: 20px;">
          <router-link to="/Register">

            <el-link type="primary" >还没注册？点击注册！</el-link>
          </router-link>

        </div>
      </el-container>
      <el-dialog title="你不会是机器人吧" :visible.sync="flag" width="350px" @open="">
        <LoginComponent @verification="Login" :key="new Date().getTime()"/>
      </el-dialog>

    </div>


  </div>

</template>


<script>
import {login} from "../utils/api"
import {Loading} from "element-ui";
import LoginComponent from "@/components/login/LoginComponent";

export default {
  name: "LoginPage",
  components: {LoginComponent},
  props: {},
  data() {
    return {
      labelPosition: 'right',
      username:"",
      password : "",
      flag: false,

    }
  }, methods: {
    fresh() {

    },
    Login(verification){
      // console.log("login")
      this.flag = false
      if( ! verification)
        return


      login({
        username:this.username,
        password:this.password
      }).then(res=>{
        this.$nextTick(()=>{
          Loading.service().close();
        })
        if(res.objects){
          this.log(res.message,"success")
          // console.log(res)
          var user =res.objects.user
          if(user.bookshelf==null)
            user.bookshelf= {}
          if(user.history==null)
            user.history={}
          this.$store.commit("setUser",user)
          window.localStorage.setItem('token',res.objects.token);
          this.$router.push("/ManageBookComponent")
        }else{
          this.log(res.message,"warning")
        }


      })
    },
    notify(title,message,type){
      this.$notify({
        title,
        message,
        type,
        duration : 2000
      });
    },
    log(msg,type){
      this.$message({
        message:msg,
        type
      });
    },
    checkLogin(){

      this.username=this.username.trim()
      this.password=this.password.trim()
      if(this.username==='' || this.password === ''){
        this.log("账户或密码为空","warning")
        return;
      }

      this.flag =true


    },

  }, watch: {}, computed: {}
}
</script>
<style scoped>
.page{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 100vh;
  background: url("../assets/bg.webp") center center no-repeat;
  background-size: 100% 100%;

  /*min-height: 1080px;*/
  text-align: center;
  /*min-height: 1080px;*/
}
#login{
  color: #283d51;

  width: 100%;
}
.content{
  width: 300px;
}
.Header{
  margin: 0 auto;
}
.login-button{
  margin: 0 auto;
}
.form-item-lebel{
  color: rgba(3, 3, 3, 100);
}

</style>